<template>
    <view v-if="Object.keys(album).length > 0">
<!--        {{album.name}}-->
<!--        &lt;!&ndash;专辑详情&ndash;&gt;-->
        <!-- 专辑背景 开始 -->
        <view class="album_bg">
            <img model="widthFix" :src="album.cover" alt="">
            <view class="album_info">
                <view class="album_name">{{album.name}}</view>
                <view class="album_btn">关注专辑</view>
            </view>
        </view>
        <!-- 专辑背景 结束 -->

        <!-- 专辑作者 开始-->
        <view class="album_author">
            <view class="album_author_info">
                <img mode="widthFix" :src="album.user.avatar" alt="">
                <view class="author_name">
                {{album.user.name}}
                </view>
            </view>
            <view class="album_author_desc">
                <text>
                    {{album.desc}}
                </text>
            </view>
        </view>
        <!-- 专辑作者 结束-->

        <!-- 图片列表 开始 -->
        <view class="album_list">
            <view class="album_item" v-for="(item,index) in wallpaper" :key="item.id">
                <go-detail :list="wallpaper" :index="index">
                    <img mode="aspectFill" :src="item.thumb+item.rule.replace('$<Height>',360)" alt="">
                </go-detail>

            </view>
        </view>
        <!-- 图片列表 结束 -->
    </view>
</template>

<script>
import GoDetail from "@/components/goDetail";
export default {
    components: {GoDetail},
    data() {
        return {
            // 要获取的ID
            id: '',
            params: {
                limit: 30,
                order: "new",
                skip: 0,
                // 值为 1 的时候 返回值中有 album 对象
                // 值为 0 的时候 返回值中 只有 wallpaper 对象
                first: 1
            },
            // 数据列表
            album:{},
            wallpaper: [],
            // 是否还有下一页数据
            hasMore: true
        }
    },
    methods: {
        getList() {
            this.request({
                url: `http://157.122.54.189:9088/image/v1/wallpaper/album/${this.id}/wallpaper`,
                data: this.params
            }).then(result => {

                if (Object.keys(this.album).length === 0){
                    this.album = result.res.album;
                }

                if(result.res.wallpaper.length ===0 ) {
                    this.hasMore = false;
                    uni.showToast({
                        title: "没有更多数据了！",
                        icon: "none"
                    });
                    return;
                }
                this.wallpaper = [...this.wallpaper, ...result.res.wallpaper];
                console.log(this.album);
                console.log(this.wallpaper)
            })
        }
    },
    // 页面加载完毕的时候
    onLoad(options) {
        this.id = options.id;
        // this.id="5e26a776e7bce739af7644a7";
        this.getList()
    },
    // 页面触底 下拉加载下一页事件
    onReachBottom() {
      // console.log('我是谁')
        if(this.hasMore) {
            this.params.first = 0;
            this.params.skip += this.params.limit;
            this.getList()
        }else {
            uni.showToast({
                title: "没有更多数据了！",
                icon: "none"
            })
        }
    },
    // 页面结束
    mounted() {
        // this.getList()
    }

}
</script>

<style scoped lang="scss">
    .album_bg{
        position: relative;
        img{}
        .album_info{
            position: absolute;
            width: 100%;
            left: 0;
            bottom: 0;
            display: flex;
            justify-content: space-between;
            height: 80rpx;
            align-items: center;
            color: #fff;
            padding: 0 15rpx;
            .album_name{
                font-size: 40rpx;
            }
            .album_btn{
                background-color: $color;
                width: 152rpx;
                height: 60rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 10rpx;
            }
        }

    }

    .album_author{
        padding: 10rpx;
        .album_author_info{
            padding: 10rpx 0;
            display: flex;
            img{
                width: 50rpx;
            }
            .author_name{
                color: #000;
                padding-left: 15rpx;
            }
        }
        .album_author_desc{}
    }

    .album_list{
        display: flex;
        flex-wrap: wrap;
        .album_item{
            width: 33.33%;
            border: 3rpx solid #fff;
            img{
                height: 160rpx;
            }
        }
    }

</style>
